<template>
  <view class="dialogBox">
    <scroll-view class="scroll-view_H" scroll-y="true" style="height: 100vh;">
		<view class="chatBox">
			<view v-for="(item,index) in chatList" :key="index">
				<view class="robot">
					<u-avatar src="@/static/images/profile.jpg"></u-avatar>
					<view class="text right">
						{{item.problemContent}}
						<view class="btns">
							<u-button :disabled="item.disbal" type="primary" shape="circle" :plain="true" size="mini" text="是" @click="yesProblem(item,index)" style="margin-right:10px;width:1.5rem;"></u-button>
							<u-button :disabled="item.disbal" type="primary" shape="circle" :plain="true" size="mini" text="否" @click="noProblem(item,index)" style="width:1.5rem;"></u-button>
						</view>
					</view>
				</view>
				<view class="user" v-if="item.disbal">
					<view class="text left">
						否
					</view>
					<u-avatar src="@/static/images/profile.jpg"></u-avatar>
				</view>
			</view>
		</view>
	</scroll-view>
  </view>
</template>

<script>
	import {
		guideSymptomProblemList,
		guideProblemDeptList,
		guideThirdList
	} from "@/api/home/home.js";
  export default {
	data() {
		return {
			chatList:[],
			problemList:[]
		}
	},
	onLoad: function(options) {
		this.guideSymptomProblemList(options.symCode)
	},
	methods:{
		yesProblem(item,index){
			item.disbal = true
			guideProblemDeptList({problemCode:item.problemCode}).then(res=>{
				guideThirdList({localDeptCode:res.rows[0].deptCode}).then(ress=>{
					uni.navigateTo({
					  url:'/pages/home/selectDept?thirdDeptCode='+ress.rows[0].thirdDeptCode
					})
				})
			})
		},
		noProblem(item,index){
			item.disbal = true
			if(index!=this.problemList.length-1){
				this.chatList.push(this.problemList[index+1].guideProblem[0])
			}else{
				guideProblemDeptList({problemCode:item.problemCode}).then(res=>{
					uni.navigateTo({
					  url:'/pages/home/selectDept?deptCode='+res.rows[0].deptCode
					})
				})
			}
		},
		guideSymptomProblemList(symCode){
			guideSymptomProblemList({symCode:symCode}).then(res=>{
				this.problemList = res.rows
				this.chatList.push(this.problemList[0].guideProblem[0])
				this.chatList.map(item=>{
					item.disbal = false
				})
				console.log(this.chatList)
			})
		},
	}
  }
</script>

<style lang="scss" scoped>
  page {background-color: #eee;}
  .chatBox{
	  width: 90%;
	  margin:0 auto;
	  padding: 1rem 0;
	  .robot{
		  display: flex;
		  margin-bottom: 0.8rem;
		  justify-content: flex-start;
		  .text{
			  margin-left: 1rem;
			  max-width: 70%;
			  padding: 10px;
			  background-color: #fff;
			  border-radius: 8px;
		  }
		  .right {
				background-color: #fff;
				position: relative;
				.btns{
					display: flex;
					justify-content: center;
					margin-top: 0.5rem;
					.yes,.no{
						padding: 0.1rem 0.6rem;
						border:1rpx solid #3c96f3;
						color: #3c96f3;
						border-radius: 10px;
					}
					.yes{
						margin-right: 15px;
					}
				}
			}
		  .right:before {
			  content: '';
			  position: absolute;
			  width: 0;
			  height: 0;
			  left: -20px;
			  top:1rem;
			  border: 10px solid;
			  border-color:transparent #fff transparent  transparent;
			}
			
	  }
	  .user{
		  display: flex;
		  margin-bottom: 0.8rem;
		  justify-content: flex-end;
		  .text{
			  margin-right: 1rem;
			  max-width: 70%;
			  padding: 10px;
			  background-color: #fff;
			  border-radius: 8px;
		  }
		  .left {
				background-color: #fff;
				position: relative;
			}
		  .left:before {
			  content: '';position: absolute;width: 0;height: 0;right: -20px;top:0.5rem;border: 10px solid;border-color:transparent transparent transparent #fff;
			}
	  			
	  }
  }
</style>
